/******************************************************************************
* File description: SettingConnection.qml
* Function: 设置-网络连接
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-30
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.14

Item {
    id: root

    /* property 定义开始 */
    // 信号
    signal settingReturnSig()
    /* property 定义结束 */

    // 顶部导航栏
    TabbarNav {
        id: tabNav
        width: parent.width
        height: 56
        isEnable: true
        title: "网络设置"

        onReturnSig: {
            root.settingReturnSig()
            console.log("tabbar nav")
        }
        z: 999
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // 主体部分
        Rectangle {
            id: mainPart
            Layout.fillWidth: true
            Layout.preferredHeight: parent.height - btnContainer.height
            Layout.alignment: Qt.AlignTop

            // 背景
            Rectangle {
                anchors.fill: parent
                LinearGradient {
                    anchors.fill: parent
                    start: Qt.point(0, 0)
                    end: Qt.point(0, height)
                    gradient: Gradient {
                        GradientStop {position: 0.0; color: "#007BD8"}
                        GradientStop {position: 1.0; color: "#001A5A"}
                    }
                }
            }

            Rectangle {
                id: tabViewContainer
                width: 600
                height: 330
                anchors.centerIn: parent
                color: "#FFD2EBFF"
                border.width: 0
                clip: true
                layer.enabled: true
                layer.effect: OpacityMask {
                    maskSource: Rectangle {
                        width: tabViewContainer.width
                        height: tabViewContainer.height
                        radius: 12
                    }
                }

                // 内容部分
                TabView {
                    id: tabView
                    anchors.fill: parent

                    Tab {
                        title: "网络设置"
                        component: SettingConnectionWeb {
                            id: webSetting
                            anchors {
                                fill: parent
                                topMargin: 40
                                leftMargin: 100
                            }
                        }
                    }

                    Tab {
                        title: "语音模块设置"
                        component: SettingConnectionVoice {
                            id: voiceSetting
                            anchors {
                                fill: parent
                                topMargin: 40
                                leftMargin: 100
                            }
                        }
                    }

                    // 设置tabbar样式
                    style: TabViewStyle {
                        frameOverlap: 1                 // 此属性保留各个选项卡按钮和框架之间的重叠量
                        tabsAlignment: Qt.AlignLeft  // 选项卡按钮的水平对齐方式(默认左侧)
                        // 占位元素，将tab标签向右挤16px
                        leftCorner: Item {
                            implicitWidth: 16
                            implicitHeight: 62
                        }

                        // 每个tab标签
                        tab: Item {
                            implicitWidth: tabBarLabel.implicitWidth + 2
                            implicitHeight: 55 + tabBarItem.anchors.topMargin

                            Rectangle {
                                id: tabBarItem
                                implicitWidth: tabBarLabel.implicitWidth
                                implicitHeight: styleData.selected ? 55 : 45
                                anchors {
                                    left: parent.left
                                    topMargin: 8
                                    bottom: parent.bottom
                                }
                                border.width: 0
                                radius: styleData.selected ? 4 : 0
                                color: styleData.selected ? "#FFFFFFFF" : "#FFA3BACC"

                                // 文字
                                Label {
                                    id: tabBarLabel
                                    leftPadding: 24
                                    rightPadding: 24
                                    anchors{
                                        centerIn: parent
                                    }
                                    font.family: 'Alibaba PuHuiTi'
                                    font.pixelSize: styleData.selected ? 18 : 16
                                    color: styleData.selected ? "#FF222222" : "#FFFFFF"
                                    text: qsTr(styleData.title)
                                }
                            }
                        }

                        // 边框
                        frame: Rectangle {border.width: 0}
                    }
                }
            }

        }

        // 按钮部分
        Rectangle {
            id: btnContainer
            Layout.fillWidth: true
            Layout.preferredHeight: 80

            RowLayout {
                height: parent.height
                anchors.rightMargin: 16
                anchors.right: parent.right

                PureButton {
                    id: canceledBtn
                    pureText: "取消(C)"
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                }
            }
        }
    }
}
